<template>
  <div class="todo-list-panel">
    <div class="todo-header">
      <input type="text" placeholder="请输入你的任务名称，按回车键确认" v-model="title" @keyup.enter="add"/>
    </div>
    <el-scrollbar style="height: 256px">
      <TodoList :todos="todos"/>
    </el-scrollbar>
    <br/>
    <div class="todo-footer" v-show="footerShow">
      <label>
        <span>
          <t-checkbox :indeterminate="isIndeterminate"
                           v-model="isAll"
                           class="todo-check-all"
          >全选&nbsp;&nbsp;{{doneTotal}} / {{todos.length}}
          </t-checkbox>
        </span>
      </label>
      <div class="tip">
        <el-button @click="clearAllTodo" round plain type="danger" size="mini">清除已完成任务</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import {nanoid} from 'nanoid'
import TodoList from "@/components/todo-list/todo-list";
import todoApi from "@/api/todoApi";

export default {
  name: "panel",
  components: {TodoList},
  data() {
    return {
      title: "",
      todos:JSON.parse(localStorage.getItem('todos')) || [],
      isIndeterminate: false,
      checkAll: false,
      footerShow: false,
    }
  },
  methods: {
    add() {
      //校验数据
      if(!this.title.trim()) return alert('输入不能为空')
      //将用户的输入包装成一个Ttodo对象
      const todoObj = {id:nanoid(),title:this.title,done:false}
      //添加一个todo组件
      this.addTodo(todoObj)
      //清空输入
      this.title = ''
    },
    //添加一个todo
    addTodo(x){
      this.todos.unshift(x)
    },
    //勾选或取消勾选一个TODO
    checkTodo(id){
      this.todos.forEach((todo)=>{
        if(todo.id === id) todo.done = !todo.done
      })
    },
    //删除一个选项
    deleteTodo(id){
      this.todos = this.todos.filter((todo)=>{
        return todo.id !== id
      })
    },
    //全选、取消
    checkAllTodo(done){
      this.todos.forEach((todo)=>{
        todo.done = done
      })
    },
    //清除已完成
    clearAllTodo(){
      this.todos = this.todos.filter((todo)=>{
        return !todo.done
      })
    },
    //修改TODO
    updateTodo(id,title){
      this.todos.forEach((todo)=>{
        if(todo.id === id) todo.title = title
      })
    }
  },
  watch:{
    //监视todos
    todos:{
      deep:true, //深度监视
      handler(value) {
        localStorage.setItem('todos',JSON.stringify(value))
        todoApi.update(localStorage.getItem("jwt"), value)
        this.footerShow = value.length > 0;
      }
    },
    doneTotal() {
      if (this.doneTotal === this.todos.length) {
        this.isAll = true;
        this.isIndeterminate = false;
      }
      if (this.doneTotal === 0) {
        this.isIndeterminate = false;
      }
      if (this.doneTotal < this.todos.length && this.doneTotal > 0) {
        this.isIndeterminate = true;
      }
    },
  },
  computed:{
    doneTotal(){
      //ES6条件统计
      return this.todos.reduce((pre,todo)=>pre + (todo.done ? 1 : 0),0)
    },
    isAll:{
      get(){
        return this.doneTotal === this.total && this.total > 0
      },
      set(value){
        this.checkAllTodo(value)
      }
    },
    total(){
      return this.todos.length
    },
  },
  mounted() {
    this.$bus.$on('checkTodo',this.checkTodo)
    this.$bus.$on('updateTodo',this.updateTodo)
    this.$bus.$on('deleteTodo',this.deleteTodo)
    let todos = localStorage.getItem("todos");
    if (todos === null) {
      todoApi.get(localStorage.getItem("jwt")).then(
        res => {
          this.todos = res.data.data
        }
      ).catch(

      )
    } else {
      this.footerShow = JSON.parse(todos).length > 0;
      todoApi.update(localStorage.getItem("jwt"), JSON.parse(todos))
    }
  }
}
</script>

<style scoped>
/*header*/
.todo-header {
  margin: auto;
  width: 564px;
}
.todo-header input {
  margin: 20px auto auto;
  width: 540px;
  height: 24px;
  font-size: 13px;
  border: 1px solid #ccc;
  border-radius: 9px;
  padding: 2px 12px;
}
.todo-header input:focus {
  outline: none;
  border-color: rgba(82, 168, 236, 0.8);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}
.todo-list-panel {
  margin: 0px auto auto;
  width: 600px;
  height: 360px;
  background-color: rgba(255,255,255,0.5);
  border-radius: 25px;
  opacity: 1;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.todo-footer {
  width: 564px;
  height: 30px;
  position: absolute;
  right: 20px;
  bottom: 10px;
  line-height: 30px;
}
.todo-footer .tip {
  float: right;
  line-height: 1;
}
.todo-footer span{
  font-size: 14px;
  color: #5c6267;
}
.todo-footer label {
  margin-left: 6px;
  float: left;
  cursor: pointer;
}
.todo-check-all {
  margin-left: 6px;
}
</style>
<style>
/* element滚动条组件 隐藏水平滚动条 */
.todo-list-panel .el-scrollbar__wrap {
  overflow-x: hidden !important;
}
.todo-list-panel .is-horizontal {
  display: none;
}
.t-checkbox.t-is-checked .t-checkbox__input {
  border-color: #3a8ee6 !important;
  background-color: #3a8ee6 !important;
}
</style>
